<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试 - 后台管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 { color: #667eea; margin-bottom: 20px; }
        button {
            padding: 12px 24px;
            margin: 10px 5px;
            border: none;
            border-radius: 5px;
            background: #667eea;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover { background: #5568d3; }
        .result {
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 5px;
            border-left: 4px solid #667eea;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 13px;
            max-height: 500px;
            overflow-y: auto;
        }
        .success { border-left-color: #10b981; background: #f0fdf4; }
        .error { border-left-color: #ef4444; background: #fef2f2; }
        .info { border-left-color: #3b82f6; background: #eff6ff; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 后台API测试工具</h1>
        <p style="color: #666; margin-bottom: 20px;">测试各个API接口是否正常工作</p>
        
        <div>
            <button onclick="testGetDevices()">📱 测试获取设备列表</button>
            <button onclick="testDeviceDetail()">🔍 查看设备详情</button>
            <button onclick="clearResult()">🗑️ 清除结果</button>
        </div>
        
        <div id="result" class="result info">等待测试...</div>
    </div>

    <script>
        const resultDiv = document.getElementById('result');

        function showResult(message, type = 'info') {
            resultDiv.textContent = message;
            resultDiv.className = 'result ' + type;
        }

        function clearResult() {
            showResult('等待测试...', 'info');
        }

        async function testGetDevices() {
            try {
                showResult('🔄 正在测试获取设备列表...', 'info');
                
                const response = await fetch('api.php/api/devices');
                const data = await response.json();
                
                let message = `✅ 测试成功！\n\n`;
                message += `HTTP状态码: ${response.status}\n`;
                message += `设备数量: ${data.devices ? data.devices.length : 0}\n\n`;
                message += `响应数据:\n${JSON.stringify(data, null, 2)}`;
                
                if (data.devices && data.devices.length > 0) {
                    message += `\n\n📊 设备列表:`;
                    data.devices.forEach((device, index) => {
                        message += `\n\n设备 ${index + 1}:`;
                        message += `\n  ID: ${device.device_id}`;
                        message += `\n  名称: ${device.device_name || '未知'}`;
                        message += `\n  最后在线: ${device.last_seen || '未知'}`;
                        
                        const location = device.last_location || device.location;
                        if (location) {
                            message += `\n  位置信息:`;
                            message += `\n    经纬度: ${location.latitude}, ${location.longitude}`;
                            message += `\n    精度: ${location.accuracy}米`;
                            message += `\n    时间: ${location.timestamp || location.received_at}`;
                            if (location.address) {
                                message += `\n    地址: ${location.address}`;
                            }
                            if (location.location_name) {
                                message += `\n    位置描述: ${location.location_name}`;
                            }
                            message += `\n    是否模拟: ${location.is_simulated ? '是' : '否'}`;
                        } else {
                            message += `\n  位置信息: 暂无`;
                        }
                    });
                }
                
                showResult(message, 'success');
            } catch (error) {
                showResult(
                    `❌ 测试失败！\n\n` +
                    `错误信息: ${error.message}\n\n` +
                    `可能的原因:\n` +
                    `1. API路径不正确\n` +
                    `2. 服务器未正确配置\n` +
                    `3. CORS跨域问题\n\n` +
                    `请检查浏览器控制台(F12)查看详细错误`,
                    'error'
                );
            }
        }

        async function testDeviceDetail() {
            try {
                showResult('🔄 正在获取设备详情...', 'info');
                
                // 先获取设备列表
                const response = await fetch('api.php/api/devices');
                const data = await response.json();
                
                if (!data.devices || data.devices.length === 0) {
                    showResult('⚠️ 暂无设备数据\n\n请先确保有设备注册并上报了位置', 'error');
                    return;
                }
                
                const device = data.devices[0];
                const location = device.last_location || device.location;
                
                let message = `✅ 设备详情\n\n`;
                message += `设备ID: ${device.device_id}\n`;
                message += `设备名称: ${device.device_name || '未知'}\n`;
                message += `设备型号: ${device.device_model || '未知'}\n`;
                message += `Android版本: ${device.android_version || '未知'}\n`;
                message += `注册时间: ${device.registered_at || '未知'}\n`;
                message += `最后在线: ${device.last_seen || '未知'}\n`;
                message += `状态: ${device.status || '未知'}\n`;
                
                if (location) {
                    message += `\n📍 位置信息:\n`;
                    message += `  纬度: ${location.latitude}\n`;
                    message += `  经度: ${location.longitude}\n`;
                    message += `  精度: ${location.accuracy}米\n`;
                    message += `  时间: ${location.timestamp || location.received_at}\n`;
                    if (location.address) {
                        message += `  地址: ${location.address}\n`;
                    }
                    if (location.location_name) {
                        message += `  位置描述: ${location.location_name}\n`;
                    }
                    message += `  是否模拟位置: ${location.is_simulated ? '是' : '否'}\n`;
                } else {
                    message += `\n📍 位置信息: 暂无\n`;
                }
                
                showResult(message, 'success');
            } catch (error) {
                showResult(
                    `❌ 获取失败！\n\n` +
                    `错误信息: ${error.message}`,
                    'error'
                );
            }
        }

        // 自动运行首次测试
        window.addEventListener('load', () => {
            setTimeout(testGetDevices, 500);
        });
    </script>
</body>
</html>


